<template>
  <div class="date-wrap">
    <YxpCalendarperson
      @changeMonth="changeMonth"
      @choseDay="choseDay"
      :markDateMore="markDateMore"
      :isBorder="isBorder"
      v-if="isShow"
    ></YxpCalendarperson>
    <div class="date-wrap-course">
      <div v-if="todayCourse.length" class="date-course-list">
        <div class="date-course-list-item" v-for="(item,i) in todayCourse" :key="'date' + i">
          <div class="item-l">
            <span class="item-text">{{item.date}}</span>
            <span class="item-text">{{item.s_time}}~{{item.e_time}}</span>
            <span class="item-tag">{{item.classesinfo}}</span>
            <span class="item-text">{{item.course_type}}</span>
          </div>
          <div class="item-r">
            <courseInterval :data="item" @enterRoom="enterRoom" />
          </div>
        </div>
      </div>
      <div class="date-course-list" v-else>
        <div class="no-class">
          <img src="@/assets/home/no-class.png" />
          <p class="tips">没有学习安排~</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { enterRoom } from "@/utils/tools";
import moment from 'moment';
import {
  postForm,
} from "@/services";
import YxpCalendarperson from "@/components/common/YxpCalendarperson/index.vue"
import { Timeline, Tooltip } from "ant-design-vue";
import { mapState } from "vuex";
import courseInterval from "./courseInterval";
import { formatData2Calendar } from "../mycourse/utils"
export default {
  components: {
    courseInterval,
    ATimeline: Timeline,
    ATimelineItem: Timeline.Item,
    ATooltip: Tooltip,
    YxpCalendarperson
  },
  data () {
    return {
      padUrl: process.env.VUE_APP_PADURL,
      doData: [],
      dateData: {},
      todayCourse: [],
      curMonth: moment().format('YYYY-MM'),
      curDay: moment().format('YYYY-MM-DD'),
      markDateMore: [],
      isBorder: true,
      choseDaySelf: '',
      isShow: false
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  created () {
    this.getData()
  },
  methods: {
    enterRoom (data) {
      enterRoom(data, this)
    },
    getData () {
      console.log(this.dateData[this.curMonth], this.curMonth, this.choseSelfMonth,  this.choseDaySelf,  '-=========1111')
      if (!this.dateData[this.curMonth]) {
        postForm('/useronline/tablecalendar', {
          date: this.curMonth
        }).then((r) => {
          if (r.code == 1) {
            this.markDateMore = formatData2Calendar(r.data)
            setTimeout(() => {
              this.isShow = true
            }, 10)
            console.log(this.markDateMore)
            this.dateData = {}
            this.dateData[this.curMonth] = r.data
            if (this.curMonth === this.choseSelfMonth && this.choseDaySelf) {
              this.todayCourse = r.data[this.choseDaySelf]
            } else {
              this.todayCourse = []
            }
            // if (r.data[this.choseDaySelf]) {
            //   this.todayCourse = r.data[this.choseDaySelf]
            // } else {
            //   console.log(this.dateData, this.curMonth, this.curDay, '=====')
            //   this.doData = this.dateData[this.curMonth][this.curDay] || []
            //   console.log(this.curDay, '-=-=-=-=-=-=-', r.data[this.curDay])
            //   if (this.doData.length === 0) {
            //     this.todayCourse = []
            //   } else {
            //     this.todayCourse = r.data[this.curDay]
            //   }
            // }
          }
        })
      } else {
        this.doData = this.dateData[this.curMonth][this.curDay] || []
        if (this.doData.length === 0) {
          this.isEmpty = true
        } else {
          this.isEmpty = false
        }
      }
    },
    changeMonth (date) {
      console.log(date, '===-=-=-=-=-=-')
      this.isEmpty = false
      this.curMonth = date.split('/').slice(0, 2).join('-')
      // let d = new Date()
      // let nowDay = '01'
      // if (d.getDate() > 1) {
      //   nowDay = d.getDate() > 9 ? d.getDate() : '0' + d.getDate()
      // }
      // this.curDay = `${this.curMonth}-${nowDay}`
      this.getData()
    },
    choseDay (item) {
      console.log(item, '-=-=-=-=-=====')
      this.choseSelfMonth = item.date.split('/').slice(0, 2).join('-')
      this.todayCourse = item.course || [];
      this.curDay = moment(item.date).format('YYYY-MM-DD')
      this.choseDaySelf = moment(item.date).format('YYYY-MM-DD')
    }
  }
}
</script>
<style lang="less" scoped>
.date-wrap {
  &-course {
    margin-top: 20px;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    .date-course-list {
      display: flex;
      flex-direction: column;
      padding: 19px 19px 19px 32px;
      &-item {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        .item-l {
          display: flex;
          align-items: center;
          .item-text {
            color: #363636;
            font-size: 16px;
            font-weight: 400;
            font-family: Microsoft YaHei;
            margin-right: 10px;
            &:first-child {
              color: #020202;
            }
          }
          .item-tag {
            display: block;
            width: 60px;
            height: 20px;
            border: 1px solid #27BFA3;
            opacity: 1;
            border-radius: 4px;
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 18px;
            color: #27BFA3;
            text-align: center;
            margin-left: 10px;
            margin-right: 10px;
          }
        }
        .item-r {
          span {
            display: block;
            width: 80px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            cursor: pointer;
          }
          .no {
            color: #27BFA3;
          }
          .end {
            color: #BCBCBC;
          }
          .living {
            color: #fff;
            background: #27BFA3;
            border-radius: 19px;
          }
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
      .no-class {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        img {
          width: 200px;
          height: 156px;
        }
        .tips {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 26px;
          color: #93999F;
          margin-top: 26px;
        }
      }
    }
  }
}
</style>
